<!--
 * @Author: your name
 * @Date: 2020-10-05 11:45:02
 * @LastEditTime: 2021-02-01 11:11:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \longh_admin\src\views\Home\index.vue
-->
<!--  -->
<template>
  <div>
    <a-card :bordered="false">
      <div class="item_table">
        <p class="big_title">待完成任务</p>
        <div class="flex table_list">
          <div class="flex-1">
            <div class="flex">
              <i class="iconfont qiye_icon icon-qiye1"></i>
              <div class="flex-1">
                <p class="tips_title">
                  待审企业信息
                  <span class="tags"></span>
                </p>
                <p class="count_num">
                  {{UndoneStatisticsData.entCnt}}
                  <span class="unit">(条)</span>
                </p>
              </div>
            </div>
          </div>

          <div class="flex-1">
            <div class="flex">
              <i class="iconfont gongxu_icon icon-gongxu"></i>
              <div class="flex-1">
                <p class="tips_title">
                  待审产品供应信息
                  <span class="tags"></span>
                </p>
                <p class="count_num">
                  {{UndoneStatisticsData.productCnt}}
                  <span class="unit">(条)</span>
                </p>
              </div>
            </div>
          </div>

          <div class="flex-1">
            <div class="flex">
              <i class="iconfont xuqiu_icon icon-xuqiu"></i>
              <div class="flex-1">
                <p class="tips_title">
                  待审产品需求信息
                  <span class="tags"></span>
                </p>
                <p class="count_num">
                  {{UndoneStatisticsData.materialsCnt}}
                  <span class="unit">(条)</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>

    <a-card class="mt-40" :bordered="false">
      <div class="item_table">
        <p class="big_title">数据分析</p>
        <div id="myChart"></div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getUndoneStatistics, getMaterialsCountByMonth, getProductCountByMonth } from '@/api/SysStatistics'
import {GetUserInfo} from '@/api/login'
export default {
  data() {
    return {
      UndoneStatisticsData: {},
      productNewData: [],
      productData: [
        {
          count: 0,
          month: 1,
        },
        {
          count: 0,
          month: 2,
        },
        {
          count: 0,
          month: 3,
        },
        {
          count: 0,
          month: 4,
        },
        {
          count: 0,
          month: 5,
        },
        {
          count: 0,
          month: 6,
        },
        {
          count: 0,
          month: 7,
        },
        {
          count: 0,
          month: 8,
        },
        {
          count: 0,
          month: 9,
        },
        {
          count: 0,
          month: 10,
        },
        {
          count: 0,
          month: 11,
        },
        {
          count: 0,
          month: 12,
        },
      ],

      MaterialsNewCountByMonthData: [],
      MaterialsCountByMonthData: [
        {
          count: 0,
          month: 1,
        },
        {
          count: 0,
          month: 2,
        },
        {
          count: 0,
          month: 3,
        },
        {
          count: 0,
          month: 4,
        },
        {
          count: 0,
          month: 5,
        },
        {
          count: 0,
          month: 6,
        },
        {
          count: 0,
          month: 7,
        },
        {
          count: 0,
          month: 8,
        },
        {
          count: 0,
          month: 9,
        },
        {
          count: 0,
          month: 10,
        },
        {
          count: 0,
          month: 11,
        },
        {
          count: 0,
          month: 12,
        },
      ],
    }
  },

  components: {},

  computed: {},

  mounted() {
    // setTimeout(() => {
    //   this.GetInitMap()
    // }, 5500)
  },
  created() {
    this.getUndoneStatistics()
    this.getMaterialsCountByMonth()
    this.getProductCountByMonth()
    //注释异步
    // this.GetUserInfo()
  },
  methods: {
    // 获取用户信息
    GetUserInfo(){
      GetUserInfo()
        .then((res) => {
          if (res.code == 200) {

          }
        })
        .catch((error) => {})
    },
    //按月统计某年需求数
    getMaterialsCountByMonth() {
      let _params = {
        year: '2020',
      }
      getMaterialsCountByMonth(_params)
        .then((res) => {
          if (res.code == 200) {
            console.log('按月统计某年需求数')
            console.log(res)
            let _newarr = []
            res.data.forEach((elementA) => {
              this.MaterialsCountByMonthData.forEach((elementB) => {
                if (elementB.month == elementA.month) {
                  _newarr.push(elementA.count)
                } else {
                  _newarr.push(elementB.count)
                }
              })
            })
            this.MaterialsNewCountByMonthData = _newarr
             this.GetInitMap()
          }
        })
        .catch((error) => {})
    },

    //按月统计某年产品供应数
    getProductCountByMonth() {
      let _params = {
        year: '2020',
      }
      getProductCountByMonth(_params)
        .then((res) => {
          if (res.code == 200) {
            console.log('按月统计某年产品供应数')
            console.log(res)
            let _newarr = []
            res.data.forEach((elementA) => {
              this.productData.forEach((elementB) => {
                if (elementB.month == elementA.month) {
                  _newarr.push(elementA.count)
                } else {
                  _newarr.push(elementB.count)
                }
              })
            })
            this.productNewData = _newarr
             this.GetInitMap()

          }
        })
        .catch((error) => {})
    },
    //获取产品，供需，数量
    getUndoneStatistics() {
      getUndoneStatistics()
        .then((res) => {
          if (res.code == 200) {
            this.UndoneStatisticsData = res.data
          }
        })
        .catch((error) => {})
    },
    GetInitMap() {
      let that = this
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      const option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          left: '18px',
          top: '0',
          textStyle: {
            color: '#999',
            fontSize: 14,
            fontWeight: '400',
          },
        },
        color: ['#2cd9c5', '#2a51bc', '#3464e0'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#bac4d5',
            },
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        grid: {
          left: '25',
          right: '25',
          bottom: '24',
          top: '75',
          containLabel: true,
        },
        legend: {
          data: ['产品供应数', '产品需求数'],
          orient: 'horizontal',
          icon: 'rect',
          show: true,
          left: 20,
          top: 25,
        },
        xAxis: {
          type: 'category',
          data: [
            '2020-01',
            '2020-02',
            '2020-03',
            '2020-04',
            '2020-05',
            '2020-06',
            '2020-07',
            '2020-08',
            '2020-09',
            '2020-10',
            '2020-11',
            '2020-12',
          ],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          // max: max_value>=100? max_value + 100: max_value+10,
          // max: max_value > 100 ? max_value * 2 : max_value + 10,
          // interval: 10,
          // nameLocation: "center",
          axisLabel: {
            color: '#999',
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F3F4F4',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: '产品供应数',
            type: 'line',
            smooth: true,
            data: that.productNewData,
          },
          {
            name: '产品需求数',
            type: 'line',
            smooth: true,
            data: that.MaterialsNewCountByMonthData,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style lang='less' scoped>
.item_table {
  .big_title {
    font-size: 22px;
    color: #303133;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9e9e9;
  }
  .table_list {
    margin-top: 24px;
    p {
      margin-bottom: 0 !important;
    }
    .tags {
      width: 14px;
      height: 14px;
      background-color: #e9284f;
      border-radius: 100%;
      display: inline-block;
      margin-left: 10px;
    }
  }
  .qiye_icon {
    background-color: #0860b6;
    color: #fff;
  }
  .iconfont {
    border-radius: 100%;
    font-size: 32px;
    text-align: center;
    line-height: 64px;
    margin-right: 16px;
    margin-left: 40px;
    width: 64px;
    height: 64px;
  }
  .gongxu_icon {
    background-color: #00b7c2;
    color: #fff;
  }
  .xuqiu_icon {
    background-color: #0860b6;
    color: #fff;
  }
  .tips_title {
    font-size: 16px;
    color: #303133;
  }

  .count_num {
    font-size: 36px;
    color: #303133;
  }

  .unit {
    font-size: 14px;
    color: #909399;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

#myChart {
  width: 100%;
  height: 465px;
  background-color: #ddd;
  margin-top: 20px;
}
</style>